<style lang="scss">
    .head{
        display: flex;
    }
    .headItem,
    .headItemFultter,
    .headItemActive{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 15px;
        .number{
            display: inline-block;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 2px solid #999;
            box-sizing: border-box;
            font-size: 22px;
            text-align: center;
            line-height: 41px;
            color: #999;
        }
    }
    .headItemFultter{
        .number,
        .text{
            border-color: #333;
            color: #333;
            font-weight: bold;
        }
    }
    .headItemActive{
        .number{
            border-color: green;
            color: #fff;
            user-select: none;
            position: relative;
            &::after{
                position: absolute;
                content: '';
                width: 15px;
                height: 7px;
                border-bottom: 2px solid green;
                border-left: 2px solid green;
                transform: rotate(-45deg);
                left: 15px;
                top: 15px;
            }
        }
        .text{
            color: green;
            font-weight: bold;
        }
    }
</style>

<template>
    <div>
       <div class="head">
        <div 
            
            :class="s_index >= index ? 'headItemActive' : 
                s_index+1==index ? 'headItemFultter' : 'headItem'
            " 

            v-for="(item,index) in arr" :key="item.id">
            <span class="number">
                {{ item.id + 1 }}
            </span>
            <span class="text">
                {{ item.text }}
            </span>
        </div>
       </div> 
       <div class="btn">
        <button @click="changeDemo()">
            下一步
        </button>
       </div>
    </div>
</template>
<script>
    export default {
        props: {
            // 当前进行到第几步
            s_index: {
                type: [String,Number],
                default: () => {
                    return -1
                }
            },
            // 动态的步骤数据
            arr: {
                type: Array,
                default: () => {
                    return [
                        {
                            text: '步骤一',
                            id: 0
                        },
                        {
                            text: '步骤二',
                            id: 1
                        },
                        {
                            text: '步骤三',
                            id: 2
                        }
                    ]
                }
            }
        },
        // 事件
        methods: {
            changeDemo(){
                // 在数据变之前做判断
                this.$emit('changeIndex',this.s_index+1)
            }
        }
    }
</script>